{% extends 'base.html' %}
{% load static %}
{% block main %}
    <form action="{% url 'goods:addcart' shangpin.id %}" method="post">
        {% csrf_token %}
        <div class="con">
            <div class="a">
                <img src="{{ MEDIA_URL }}/{{ shangpin.image }}" style="width: 300px;height: 300px">
            </div>
            <div class="b">
                <p><span>价   格    </span><strong name="huodongjia"><i>￥</i>{{ shangpin.price }}
                </strong></p>
                <br>
                <p><span>说    明    </span>{{ shangpin.caption }}</p>
                <br>
                <p><span class="btn active">规    格    </span>
                    {% for guige in guiges %}
                        <label><input type="redio" value="{{ guige.name }}" name="redia{{ guige.id }}"
                                      readonly="readonly"
                                      style="width: 100px"></label>
                        <span>    </span>
                    {% endfor %}
                </p>
                <br>
                <p>
                    <span>数    量  </span>
                    <span id="cutnum" style="cursor: pointer;font-size: 20pt" onclick="cutnum()">-</span>
                    <input maxlength="4" type="" name="quantity" id="quantity" value="1" style="width: 15px"
                           readonly="readonly">
                    <span id="addnum" style="cursor: pointer;font-size: 20pt" onclick="addnum()">+</span>
                </p>
                <br>
                <p>
                    <input type="submit" value="加入购物车"> <input type="submit" value="立即购买">
                </p>
            </div>
            <div style="margin:0 auto">
                <h4>详情</h4>
                <div>
                    <img src="{{ MEDIA_URL }}/{{ shangpin.image }}" style="width: 600px;height: 600px">

                </div>
            </div>
        </div>
    </form>
{% endblock main %}
#定义了数量加减的JS方法
{% block script %}
    <script type="text/javascript">
        function addnum() {
            var a = document.getElementById("quantity").value

            document.getElementById("quantity").value = parseInt(a) + 1
        }

        function cutnum() {
            var a = document.getElementById("quantity").value

            if (parseInt(a) > 1) {
                document.getElementById("quantity").value = parseInt(a) - 1
            } else {
                window.alert("数量最少为1")
            }

        }
    </script>
{% endblock %}